<template>
  <div class="page-container">
    <!--编辑界面-->
    <el-container>
      <el-header style="height:90px">
        <div style="float:left">
          <div style="margin-top:-35px">
            <span>类目树ID:</span>{{ this.categoryId }}
            <span style="margin-left: 240px;">类目树类型:</span>{{ this.categoryTypeF }}
          </div>
          <div style="margin-top: -18px;">
            <el-form :inline="true" :model="categoryFilters" :size="size" ref="categoryFilters">
              <el-form-item>
                <el-input v-model="categoryFiltersName" placeholder="请输入类目节点"/>
              </el-form-item>
              <el-form-item>
                <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                           @click="resetForm('categoryFilters')"/>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>

      <el-container>
        <el-card class="box-card">
          <div style="height:550px;overflow-y:auto;">
            <el-tree :data="categoryData" :filter-node-method="filterNode" :highlight-current="true"
                     :props="defaultProps" @node-click="thisTreeClick" ref="tree"></el-tree>
          </div>
        </el-card>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :tab-position="tabPosition"
                 style="width:80%">
          <el-tab-pane label="类目详情" name="first">
            <el-form :model="dataCaAgreementtegoryForm" label-width="100px" :rules="dataCategoryFormRules" style="width:600px"
                     ref="dataCategoryForm" :size="size">
              <el-form-item label="ID" prop="id" v-if="false">
                <el-input v-model="dataCategoryForm.id" :disabled="true" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="类目名称：" prop="name">
                <el-input v-model="dataCategoryForm.name" oninput="if(value.length>20)value=value.slice(0,20)"  auto-complete="off" placeholder="请输入类目名称"></el-input>
              </el-form-item>
              <el-form-item label="类目编码：" prop="categoryCode">
                <el-input v-model="dataCategoryForm.categoryCode" oninput="if(value.length>60)value=value.slice(0,60)" auto-complete="off" placeholder="请输入类目编码"></el-input>
              </el-form-item>
              <el-form-item label="第三方编码：" prop="thirdCode">
                <el-input v-model="dataCategoryForm.thirdCode" oninput="if(value.length>60)value=value.slice(0,60)" auto-complete="off" placeholder="请输入第三方编码"></el-input>
              </el-form-item>
              <div v-if="categoryType==1">
                <el-form-item label="类目扣点" prop="thirdCode">
                  <el-input v-model="dataCategoryForm.thirdCode" auto-complete="off" placeholder="%"></el-input>
                </el-form-item>
              </div>

              <div v-if="categoryType==2">
                <el-form-item label="状态" prop="isVisible">
                  <el-radio-group v-model="dataCategoryForm.isVisible">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="图片" prop="pictureUrl">
                  <el-upload
                    class="upload-demo"
                    :action="imgUpload"
                    :on-remove="handleRemove"
                    :on-preview="handlePreview"
                    :on-success="handleSuccess"
                    accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                    :show-file-list="false"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                  <img v-if="imgUrl!=null" width="100%" :src="imgUrl" alt="">
                </el-form-item>
              </div>
            </el-form>
            <div style="text-align:center;margin-top: 90px;">
              <el-button :size="size" @click="back">{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click.native="submitCategoryForm" :loading="editLoading">{{
                $t("action.submit") }}
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="子类目新增" name="second" v-if="showCategorySonTab">
            <el-form
              :model="dataCategorySonForm" label-width="100px" :rules="dataCategorySonFormRules" style="width:600px"
              ref="dataCategorySonForm" :size="size">
              <el-form-item label="类目名称：" prop="name">
                <el-input v-model="dataCategorySonForm.name" oninput="if(value.length>20)value=value.slice(0,20)" auto-complete="off" placeholder="请输入类目名称"></el-input>
              </el-form-item>
              <el-form-item label="类目编码：" prop="categoryCode">
                <el-input v-model="dataCategorySonForm.categoryCode" oninput="if(value.length>60)value=value.slice(0,60)" auto-complete="off"
                          placeholder="请输入类目编码"></el-input>
              </el-form-item>
              <el-form-item label="第三方编码：" prop="thirdCode">
                <el-input v-model="dataCategorySonForm.thirdCode" oninput="if(value.length>60)value=value.slice(0,60)" auto-complete="off" placeholder="请输入第三方编码"></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align:center;margin-top: 90px;">
              <el-button :size="size" @click="back">{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click.native="submitCategorySonForm" :loading="editLoading">{{
                $t("action.submit") }}
              </el-button>
            </div>
          </el-tab-pane>

          <el-tab-pane label="类目属性" name="third" v-if="showCategoryProperty">
            <div style="float: right; margin-bottom: 10px;">
              <el-button type="primary" @click="addCategoryProperty" :size="size">新增属性项</el-button>
            </div>
            <el-table :data="tablePropertySavedData" :border="true" style="width: 100%">
              <el-table-column prop="attrName" label="属性名称"></el-table-column>
              <el-table-column prop="value" label="属性值">
                <template slot-scope="scope">
                  <template v-for="(item,index) in scope.row.categoryPropertyValueResponseList">
                    <span>{{item.valueName}}</span>
                    <span v-if="index < scope.row.categoryPropertyValueResponseList.length - 1">,&nbsp;</span>
                  </template>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="400px">
                <template slot-scope="scope">
                  <el-button @click="handleDeleteProperty(scope.row)" type="text" size="small">删除</el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="商品参数" name="parameter" v-if="showCategoryProperty">
            <product-parameter :categoryId="categorySonId"></product-parameter>
          </el-tab-pane>

          <el-tab-pane label="类目聚合" name="fourth" v-if="showtCategoryTogether">
            <div>
              <el-form :inline="true" :model="filters" :size="size" ref="filters">
                <el-form-item>
                  <el-input v-model="categoryFiltersName1" placeholder="请输入类目节点"/>
                </el-form-item>
                <el-form-item>
                  <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                             @click="resetForm('filters')"/>
                </el-form-item>
              </el-form>
            </div>
            <div style="width:100%">
              <el-container>
                <el-card class="box-card">
                  <div style="height:550px;overflow-y:auto;">
                    <el-tree :data="categoryBehindData" :filter-node-method="filterNode" :highlight-current="true"
                             :props="defaultProps" @node-click="thisTreeClick1" ref="tree1"
                             style="margin-top: 40px;"></el-tree>
                  </div>
                </el-card>
                <div style="width:70%;">
                  <div style="margin-bottom: 15px;">
                    <label>{{this.categorySonName}}已聚合的后台类目列表</label>
                  </div>
                  <div style="margin-left: 320px;">
                    <el-button style="float: left;margin-bottom: 10px;" @click="deleteCategoryTreeNodeRelation"
                               :size="batchSize">批量删除
                    </el-button>
                    <el-table :data="categoryTogetherTableData" style="width:657px" :border="true"
                              @selection-change="handleSelectionChange">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column prop="leftTreeNodeName" label="前台类目名称" width="300px"></el-table-column>
                      <el-table-column prop="rightTreeNodeName" label="后台类目名称" width="300px"></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-container>
              <div>
                <span>聚合商品</span>
                <div style="margin-bottom:10px; border-bottom: 1px dashed #c3c3c3"></div>
                <el-form :inline="true" :model="categoryProductFilters" ref="categoryProductFilters" :size="size">
                  <el-form-item>
                    <el-input v-model="categoryProductFilters.chineseName" placeholder="商品名称"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-model="categoryProductFilters.code" placeholder="商品编码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <tree-select
                      :options="categoryOptions"
                      placeholder="商品类目"
                      v-model="categoryProductFilters.categoryId"
                      :normalizer="normalizer"
                      style="width:230px"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-select v-model="categoryProductFilters.brandId" placeholder="商品品牌">
                      <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <kt-button
                      icon="fa fa-search"
                      :label="$t('action.search')"
                      type="primary"
                      @click="findCategoryTreeNodeProduct(null)"
                    />
                  </el-form-item>
                  <el-form-item>
                    <kt-button
                      icon="fa fa-refresh" :label="$t('action.reset')"
                      type="primary"
                      @click="resetCategoryProductFiltersForm('categoryProductFilters')"
                    />
                  </el-form-item>
                </el-form>
                <div>
                  <el-button style="float: left;margin-bottom: 10px;" @click="deleteCategoryTreeNodeProduct"
                             :size="batchSize">批量删除
                  </el-button>
                  <el-button style="float: left;margin-bottom: 10px;" type="primary"
                             @click="saveCategoryTreeNodeProduct" :size="batchSize">批量新增
                  </el-button>
                </div>
                <!--表格内容栏-->
                <cy-table
                  :height="350"
                  :highlightCurrentRow="true"
                  :content="pageResult"
                  :totalSize="totalSize"
                  @selectionChange="selectionCategoryProductChange"
                  :columns="columns"
                  :showBatchDelete="false"
                  :showOperation="false"
                  @findPage="findCategoryTreeNodeProduct"
                  :showDeleteOperation="false"
                  ref="CyTable"
                >
                </cy-table>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>
      </el-container>
    </el-container>

    <!--新增节点属性项-->
    <el-dialog title="新增属性" width="60%" :visible.sync="categoryPropertyDialogVisible" :close-on-click-modal="false">
      <el-form :inline="true" :model="productPropertyfilters" :size="size" ref="productPropertyfilters">
        <el-form-item>
          <el-input v-model="productPropertyfilters.name" placeholder="属性项名称"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="productPropertyfilters.code" placeholder="属性项编码"/>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" @click="queryProductNameProperty" type="primary"/>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                     @click="resetForm('productPropertyfilters')"/>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :data="tablePropertyData"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @selection-change="handleSelectionPropertyChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="属性项名称"
          prop="name"
          width="200">
        </el-table-column>
        <el-table-column
          prop="code"
          label="属性项编码"
          width="200">
        </el-table-column>
        <el-table-column
          prop="productPropertyValue"
          label="属性值"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button :size="size" @click.native="categoryPropertyDialogVisible = false">{{ $t("action.cancel") }}
        </el-button>
        <el-button :size="size" type="primary" @click="submitFormPropertyCatagoty" :loading="editLoading">{{
          $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>

    <!--商品列表-->
    <el-dialog title="商品列表" width="60%" :visible.sync="categoryTreeNodeProductDialogVisible"
               :close-on-click-modal="false">
      <el-form :inline="true" :model="productFilters" :size="size">
        <el-form-item>
          <el-select v-model="productFilters.deptId" style="width: 200px" placeholder="所属店铺">
            <el-option
              v-for="item in storeOptions"
              :key="item.id"
              :label="item.storeName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="productFilters.chineseName" placeholder="商品名称"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="productFilters.code" placeholder="商品编码"/>
        </el-form-item>
        <el-form-item>
          <tree-select
            :options="categoryOptions"
            placeholder="商品类目"
            v-model="productFilters.productCategoryId"
            :normalizer="normalizer"
            :disableBranchNodes="new Boolean(true)"
            style="width:230px"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="productFilters.brandId" style="width: 200px" placeholder="商品品牌">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findProductPage"/>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                     @click="resetProductFiltersForm('productFilters')"/>
        </el-form-item>
      </el-form>
      <el-table
        :data="pageResult1" :size="size" align="align" style="width: 100%" :max-height="450"
        :stripe="true" @selection-change="selectionProductChange"
        :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column type="selection" :selectable='selectTable' align="center" width="55"></el-table-column>
        <el-table-column prop="storeName" label="所属店铺" sortable></el-table-column>
        <el-table-column prop="chineseName" label="商品名称" sortable></el-table-column>
        <el-table-column prop="fullNamePath" label="商品类目" sortable></el-table-column>
        <el-table-column prop="brandName" label="商品品牌" sortable></el-table-column>
        <el-table-column prop="code" label="商品编码" sortable></el-table-column>
      </el-table>

      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="refreshPageRequest"
          @size-change="handleSizeChange"
          :current-page="pageRequest1.pageNum"
          :page-size="pageRequest1.pageSize"
          :total="totalSize1"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button :size="size" @click.native="categoryTreeNodeProductDialogVisible = false">{{ $t("action.cancel") }}
        </el-button>
        <el-button :size="size" type="primary" @click="submitFormCategoryTreeNodeProduct" :loading="editLoading">{{
          $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  import ProductParameter from "./ProductParameter";
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    components: {
      KtButton,
      CyTable,
      TreeSelect,
      ProductParameter
    },
    data() {
      return {
        imgUrl: null,
        fileList: [],
        imgUpload: this.utils.imgUploadUrl,//前台类目图片上传
        categoryFiltersName: "",//类目过滤绑定值
        categoryFiltersName1: "",//类目过滤绑定值
        categoryFilters: {
          name: ""
        },
        productPropertyfilters: {
          code: "",
          name: ""
        },
        selectionCategoryProduct: [],//选中已聚合商品
        selectionProduct: [],//选中的商品
        tableProductData: [],//商品所有数据
        storeOptions: [],//店铺数组
        categoryTreeNodeProductDialogVisible: false,//商品列表显示框
        brandList: [],//商品品牌
        categoryOptions: [],//后台类目树集合
        selectionChange: [],//一聚合列表
        rightTreeNodeId: "",//聚合后台类目id
        categorySonName: "",//子类目名称
        categorySonId: "",//子类目Id
        categoryBehindData: [],//类目集合后台类目树
        categoryId: this.$route.params.categoryId,//前后台类目id
        categoryType: this.$route.params.type,//前后台类目类型
        categoryTypeF: "",//格式化商品类目名称
        productPropertyId: "",//属性值id
        productPropertyCategory: [],//属性值id
        tablePropertySavedData: [],//已保存的类目属性
        showCategorySonTab: true,//是否展示新增自类目tab
        showtCategoryTogether: false,//是否显示类目聚合
        showCategoryProperty: false,//是否显示类目属性
        propertyColumns: [
          {prop: "name", label: "属性项名称", minWidth: 120},
          {prop: "alias", label: "属性项编码", minWidth: 120},
          {prop: "pic", label: "属性值", minWidth: 120}
        ],//属性列
        tablePropertyData: [],//添加属性数据
        categoryTogetherTableData: [],//聚合类目数据
        activeName: "first",//默认展示类目详情
        categoryData: [],
        checkList: [],
        tabPosition: "top",
        defaultProps: {
          children: "categoryList",
          label: "name"
        },
        size: "small",
        batchSize: "mini",
        filters: {},
        //商品列表条件查询
        productFilters: {
          chineseName: "",
          brandId: "",
          code: "",
          deptId: "",
          flag:1
        },
        //聚合商品查询条件
        categoryProductFilters: {
          chineseName: "",
          code: "",
          categoryId: null,
          brandId: "",
        },
        columns: [
          {prop: "deptName", label: "所属组织", minWidth: 120},
          {prop: "chineseName", label: "商品名称", minWidth: 120},
          {prop: "fullNamePath", label: "商品类目", minWidth: 120},
          {prop: "brandName", label: "商品品牌", minWidth: 120},
          {prop: "code", label: "商品编码", minWidth: 120},
        ],
        columns1: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageRequest1: {pageNum: 1, pageSize: 10},
        pageResult: [],
        pageResult1: [],
        totalSize: 0,
        totalSize1: 0,
        filterColumns: [],
        editLoading: false,
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, //编辑界面是否显示
        addDialogVisible: false, //新增界面是否显示
        categoryPropertyDialogVisible: false, //属性节点新增
        // 类目详情界面数据
        dataCategoryForm: {
          id: "",
          categoryCode: "",
          thirdCode: "",
          name: "",
          isVisible: 1,
          pictureUrl: ""
        },
        // 子类目新增
        CategoryByparentId: '', // parentId
        dataCategorySonForm: {
          categoryCode: "",
          thirdCode: "",
          name: "",
          isVisible: 1,
          pictureUrl: ""
        },
        dataCategorySonFormRules: {
          name: [{required: true, message: "请输入类目名称", trigger: "blur"}],
          categoryCode: [{required: true, message: "请输入类目树编码", trigger: "blur"}]
        },
        // 子类目规则
        dataCategoryFormRules: {
          name: [{required: true, message: "请输入类目名称", trigger: "blur"}],
          categoryCode: [{required: true, message: "请输入类目树编码", trigger: "blur"}]
        },
        // 图片上传
        dialogVisible: false
      };
    },
    mounted() {
      this.queryCategory();
      this.queryCategoryById();
      this.queryProductBrand();
      if (this.categoryType == 2) {
        this.queryBehindCategory()
      }

    },
    watch: {
      categoryFiltersName(val) {
        this.$refs.tree.filter(val);
      },
      categoryFiltersName1(val) {
        this.$refs.tree1.filter(val);
      }
    },
    methods: {
      // 类目图片上传
      handleSuccess: function (res, file) {
        this.fileList = []
        if (res.code == "0000") {
          this.dataCategoryForm.pictureUrl = res.data.imgUrl
          let imgUrl = {}
          imgUrl.url = res.data.imgUrl
          this.fileList.push(imgUrl)
          this.imgUrl = res.data.imgUrl
        }

      },
      //文件移除
      handleRemove(file, fileList) {
        if (fileList && fileList.length == 0) {
          this.dataCategoryForm.pictureUrl = '';
        }
      },
      //文件预览
      handlePreview(file) {
        if (file.url) {
          window.open(file.url)
        }
      },
      //类目节点过滤
      filterNode: function (value, data, node) {
        if (!value) {
          return true;
        }
        let level = node.level;
        let _array = [];//这里使用数组存储 只是为了存储值。
        if (data.name.indexOf(value) !== -1) {
          node.isCurrent = true
        } else {
          node.isCurrent = false
        }
        this.getReturnNode(node, _array, value);
        let result = false;
        _array.forEach((item) => {
          result = result || item;
        });
        return result
      },
      getReturnNode(node, _array, value) {
        let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1;
        isPass ? _array.push(isPass) : '';
        this.index++;
        console.log(this.index)
        if (!isPass && node.level != 1 && node.parent) {
          this.getReturnNode(node.parent, _array, value);
        }
      },
      //重置
      resetForm(formName) {
        if (formName == "productPropertyfilters") {
          this.productPropertyfilters = {
            code: "",
            name: ""
          }
          this.queryProductNameProperty()
        } else if (formName == "categoryFilters") {
          this.categoryFiltersName = ""
          this.filterNode()
        } else if (formName == "filters") {
          this.categoryFiltersName1 = ""
          this.filterNode()

        }
      },
      //判断产品是否和前台勒姆已经聚合
      selectTable(row, index) {
        if (row.isAdd == "0") {
          return true
        } else {
          return false
        }
      },
      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest1.pageNum = pageNum;
        this.findProductPage(this.pageRequest1);
      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest1.pageSize = pageSize;
        this.findProductPage();
      },
      //返回类目
      back: function () {
        this.$router.push({path: "/pages/product/productCategory"})
      },
      //已聚合商品勾选
      selectionCategoryProductChange: function (params) {
        this.selectionCategoryProduct = params.selections;
      },
      // 聚合商品保存
      submitFormCategoryTreeNodeProduct: function () {
        let this_ = this;
        if (this.selectionProduct.length == 0) {
          this_.$message({
            message: "请选择要添加的商品",
            type: "error"
          });
        } else {
          let param = {}
          let categoryTreeNodeProductRequests = []
          $.each(this_.selectionProduct, function (index, val) {
            let obj = {}
            obj.leftTreeNodeId = this_.categorySonId
            obj.productId = val.id
            obj.dataType = val.dataType
            categoryTreeNodeProductRequests.push(obj)
          })
          param.categoryTreeNodeProductRequests = categoryTreeNodeProductRequests;
          this.utils.request.insertCategoryTreeNodeProduct(param, function (res) {
            if (res.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.categoryTreeNodeProductDialogVisible = false;
              this_.findCategoryTreeNodeProduct()
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }

      },
      //商品列表勾选数据
      selectionProductChange: function (params) {
        this.selectionProduct = params;
      },
      // 获取分页数据
      findProductPage: function (params) {
        let this_ = this
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest1.pageNum,
            pageSize: this_.pageRequest1.pageSize
          };
        }
        if (this_.productFilters == undefined || this_.productFilters == null) {
          this_.productFilters = {};
        }
        this_.productFilters.start = params.pageNum;
        this_.productFilters.limit = params.pageSize;
        this_.productFilters.leftTreeNodeId=this_.categorySonId;
        this.utils.request.queryShopProductPage(this_.productFilters, function (res) {
          this_.pageResult1 = res.data.rows;
          this_.totalSize1 = Number(res.data.total);
        });
      },
      //根据商家id 查询所属店铺
      selectionMerchantChange: function (param) {

      },
      //新增类目聚合商品的商品
      saveCategoryTreeNodeProduct: function () {
        let this_ = this;
        this_.categoryTreeNodeProductDialogVisible = true
        this.utils.request.queryStoreDeptList({}, function (data) {
          if (data.data != null) {
            this_.storeOptions = data.data;
          }
        });
        this_.findProductPage()
      },
      //删除已经聚合的商品
      deleteCategoryTreeNodeProduct: function () {
        let this_ = this
        if (this_.selectionCategoryProduct.length == 0) {
          this_.$message({
            message: "请选择要删除的数据",
            type: "error"
          });
        } else {
          let param = {}
          let ids = ""
          $.each(this_.selectionCategoryProduct, function (index, val) {
            ids += val.id + ","
          })
          param.ids = ids
          this.utils.request.deleteCategoryTreeNodeProduct(param, function (res) {
            if (res.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.findCategoryTreeNodeProduct();
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }
      },
      //查询所有品牌
      queryProductBrand() {
        let _this = this;
        this.utils.request.queryProductBrand({}, function (data) {
          if (data.data != null) {
            _this.brandList = data.data;
          }
        });
      },
      //格式化商品类目查询条件
      normalizer(node) {
        if (node.categoryList == null || node.categoryList.length == 0) {
          delete node.categoryList;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.categoryList
        }
      },
      //查询前台已聚合商品
      findCategoryTreeNodeProduct: function (params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.categoryProductFilters == undefined || this_.categoryProductFilters == null) {
          this_.categoryProductFilters = {};
        }
        this_.categoryProductFilters.start = params.pageNum;
        this_.categoryProductFilters.limit = params.pageSize;
        this_.categoryProductFilters.leftTreeNodeId = this.categorySonId
        this.utils.request.queryCategoryTreeNodeProduct(this_.categoryProductFilters, function (res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.pageResult = res.data.rows;
          this_.totalSize = Number(res.data.total);
        });
      },
      //删除已经聚合的类目
      deleteCategoryTreeNodeRelation: function () {
        let this_ = this
        if (this_.selectionChange.length == 0) {
          this_.$message({
            message: "请选择要删除的数据",
            type: "error"
          });
        } else {
          let param = {}
          let ids = ""
          $.each(this_.selectionChange, function (index, val) {
            ids += val.id + ","
          })
          param.ids = ids
          this.utils.request.deleteCategoryTreeNodeRelation(param, function (res) {
            if (res.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              let param = {}
              param.leftTreeNodeId = this_.categorySonId
              this_.utils.request.queryCategoryTreeNodeRelation(param, function (data) {
                if (data.data != null) {
                  this_.categoryTogetherTableData = data.data;
                }
              });
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }
      },
      //勾选已经选中聚合类目
      handleSelectionChange: function (data) {
        this.selectionChange = data
      },
      // 获取分页数据
      handleSelectionPropertyChange: function (data) {
        this.productPropertyCategory = [];
        this.productPropertyCategory = data
      },
      // 类目详情编辑
      submitCategoryForm: function () {
        this.$refs.dataCategoryForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let this_ = this;
              let params = Object.assign({}, this_.dataCategoryForm);
              this.utils.request.updateCategory(params, function (res) {
                if (res.code == "0000") {
                  this_.queryCategory();
                  this_.$message({message: "操作成功", type: "success"});
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },
      //新增属性项
      submitFormPropertyCatagoty: function () {
        let this_ = this;
        if (this_.productPropertyCategory.length == 0) {
          return this_.$message({message: "请勾选一条数据", type: "error"});
        }
        //去除重复添加的属性
        this_.tablePropertySavedData.forEach(function (item1, index1) {
          this_.productPropertyCategory.forEach(function (item, index) {
            if (item.id == item1.attrId) {
              this_.productPropertyCategory.splice(index, 1)
            }
          })
        })
        this.$confirm("确认提交吗？", "提示", {}).then(() => {
          let param = {}
          param.categoryId = this_.categorySonId
          let categoryPropertyNameRequestList = []
          $.each(this_.productPropertyCategory, function (index1, val1) {
            let categoryPropertyNameRequest = {}
            categoryPropertyNameRequest.attNameId = val1.id
            if (val1.productPropertyId != null && val1.productPropertyId != "") {

              var productPropertyIds = val1.productPropertyId.split(',')
              var categoryPropertyValueRequestList = []
              $.each(productPropertyIds, function (index2, val2) {
                if (val2 != "" && val2 != null) {
                  let categoryPropertyValueRequesst = {}
                  categoryPropertyValueRequesst.attValueId = val2
                  categoryPropertyValueRequestList.push(categoryPropertyValueRequesst)
                }
              })
            }
            categoryPropertyNameRequest.categoryPropertyValueRequestList = categoryPropertyValueRequestList
            categoryPropertyNameRequestList.push(categoryPropertyNameRequest)
          })
          param.categoryPropertyNameRequestList = categoryPropertyNameRequestList
          this.utils.request.saveCategoryPropertyName(param, function (res) {
            if (res.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.categoryPropertyDialogVisible = false
              this_.queryProductCategory(this_.categorySonId)

            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        })
      },
      //删除属性项
      handleDeleteProperty: function (row) {
        let this_ = this
        let params = {}
        params.id = row.id
        this.utils.request.deleteCategoryProperty(params, function (res) {
          if (res.code == "0000") {
            this_.$message({message: "操作成功", type: "success"});
            this_.queryProductCategory(row.categoryId)
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        })

      },
      // 子类目新增
      submitCategorySonForm: function () {
        this.$refs.dataCategorySonForm.validate(valid => {
          if (valid) {
            let this_ = this;
            if (this_.CategoryByparentId == null || this_.CategoryByparentId == '') {
              this.$message({message: "请先选择要新增的父类目", type: "error"});
              return
            }

            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = this_.dataCategorySonForm;
              params.parentId = this_.CategoryByparentId;
              params.type = this_.categoryType
              this.utils.request.addCategorySon(params, function (res) {
                if (res.code == "0000") {
                  this_.dataCategorySonForm = {};
                  this_.queryCategory();
                  this_.$message({message: "操作成功", type: "success"});
                } else {
                  this_.$message({message: "操作失败, " + res.msg, type: "error"});
                }
              });
            });
          }
        });
      },
      //商品列表条件 重置
      resetProductFiltersForm(formName) {
        this.productFilters = {
          chineseName: "",
          productCategoryId: null,
          brandId: "",
          code: "",
          deptId: "",
          flag:1
        }
        this.findProductPage()
      },
      //前台类目聚合商品 重置
      resetCategoryProductFiltersForm(formName) {
        this.categoryProductFilters = {
          chineseName: "",
          code: "",
          categoryId: null,
          brandId: "",
        },
          this.findCategoryTreeNodeProduct()
      },
      //主界面查询所有商品类目
      queryCategory: function () {
        let this_ = this;
        this.categoryData = []
        if (this.categoryType == 1) {
          let params = {};
          params.id = this.$route.params.categoryId
          this.utils.request.queryBehindCategory(params, function (data) {
            if (data.data != null) {
              this_.categoryData = data.data;
            }
          });
        } else if (this.categoryType == 2) {
          let params = {};
          params.id = this_.categoryId
          params.type = this_.categoryType
          this.utils.request.queryBeforeCategory(params, function (data) {
            if (data.data != null) {
              this_.categoryData = data.data;
            }
          });
        }

      },
      //查询后台类目聚合的属性
      queryProductCategory: function (data) {
        let params = {};
        params.categoryId = data;
        let this_ = this
        this.utils.request.queryProductCategory(params, function (res) {
          this_.tablePropertySavedData = res.data
        });
      },
      //类目类型格式化
      queryCategoryById: function () {
        let this_ = this
        if (this_.categoryType == 1) {
          this_.categoryTypeF = "后台类目";
        } else if (this_.categoryType == 2) {
          this_.categoryTypeF = "前台类目";
        } else if (res.data.type == 6) {
          this_.categoryTypeF = "店铺类目";
        } else if (res.data.type == 4) {
          this_.categoryTypeF = "商家类目";
        }
      },
      //左边商品类目树选中回调
      thisTreeClick: function (data) {
        this.activeName = "first"
        this.fileList = []
        if (data.type == 2 && data.pictureUrl != null && data.pictureUrl != "") {
          this.dataCategoryForm.pictureUrl = data.pictureUrl
          let imgUrl = {}
          imgUrl.url = data.pictureUrl
          this.fileList.push(imgUrl)
          this.imgUrl = data.pictureUrl
        }
        this.dataCategoryForm.isVisible = data.isVisible
        this.CategoryByparentId = data.id // 类目新增id
        this.dataCategoryForm.name = data.name;
        this.categorySonName = data.name
        this.dataCategoryForm.thirdCode = data.thirdCode;
        this.dataCategoryForm.categoryCode = data.categoryCode;
        this.dataCategoryForm.id = data.id;
        this.categorySonId = data.id
        //后台类目----》 显示类目属性，隐藏类目聚合
        if (data.isLeaves == 1 && data.type == 1) {
          this.showCategoryProperty = true;
          this.showtCategoryTogether = false
        } else {
          this.showCategoryProperty = false;
        }
        //前台类目---》 隐藏类目属性，显示类目聚合
        if (data.isLeaves == 1 && data.type == 2) {
          this.showtCategoryTogether = true;
          this.showCategoryProperty = false;
        } else {
          this.showtCategoryTogether = false;
        }

        if (data.level >= 10 && data.type == 1) {
          this.showCategorySonTab = false;
        } else {
          this.showCategorySonTab = true;
        }
      },
      //右边商品类目树选中回调
      thisTreeClick1: function (data) {
        let this_ = this
        if (data.isLeaves == 1) {
          this.open()
          this.rightTreeNodeId = data.id
        }
      },
      //保存前后台类目聚合
      open() {
        this.$confirm('是否聚合所选中的后台子类目？', '聚合后台类目', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {}
          let this_ = this
          param.sortValue = this_.categoryTogetherTableData.length + 1
          param.leftTreeNodeId = this_.categorySonId;
          param.rightTreeNodeId = this_.rightTreeNodeId;
          this.utils.request.saveCategoryTreeNodeRelation(param, function (res) {
            if (res.code == "0000") {
              if (res.data != null) {
                this_.categoryTogetherTableData = res.data
              }
              this_.$message({message: "操作成功", type: "success"});
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }).catch(() => {
        });
      },
      //查询前台类目已经聚合的后台类目
      queryCategoryTreeNodeRelation: function () {
        let this_ = this
        let param = {}
        param.leftTreeNodeId = this.categorySonId
        this.utils.request.queryCategoryTreeNodeRelation(param, function (data) {
          if (data.data != null) {
            this_.categoryTogetherTableData = data.data;
          }
        });
      },
      //查询后台类目
      queryBehindCategory: function () {
        let params = {};
        let this_ = this
        this.utils.request.queryBehindCategory(params, function (data) {
          if (data.data != null) {
            this_.categoryBehindData = data.data;
            this_.categoryOptions = data.data
          }
        });
      },
      //tab切换
      handleClick(tab, event) {
        //前台类目聚合
        if (tab.name == "fourth") {
          this.queryCategoryTreeNodeRelation()
          this.findCategoryTreeNodeProduct()
        } else if (tab.name == "third") { //后台类目属性
          this.queryProductCategory(this.categorySonId)
        } else if(tab.name == "parameter"){

        }
      },
      //新增商品属性项
      addCategoryProperty() {
        this.categoryPropertyDialogVisible = true;
        this.queryProductNameProperty();
      },
      //查询属性
      queryProductNameProperty: function () {
        let this_ = this
        this.utils.request.productNameProperty(this.productPropertyfilters, function (res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.tablePropertyData = res.data.rows;
        });
      },
    }
  };
</script>

<style scoped lang='scss'>
  /deep/  .el-input__inner   {
    width: 200px !important;
  }

  .el-header {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 90px;
  }

  .el-aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 600px;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 600px;
  }

  .box-card {
    min-width: 300px;
    min-height: 500px;
    margin-right: 20px;
  }

</style>
<style>
  .el-tree-node__label_copy {
    font-size: 14px;
    color: red;
  }
</style>
